<template>
    <div>
        <van-search v-model="value" shape="round" placeholder="搜索商品,共239款好物" />
        <van-row type="flex" justify="space-between">
            <van-col span="5">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item v-for="(item, index) in message" :key="index" :title="item.name" @click="ccc(index)"
                        :class="{ 'active': activeKey === index }" />
                </van-sidebar>
            </van-col>

            <van-col span="19">
                <div>
                    <div>
                        <van-image fit="contain" :src="this.issrc[indexs]" />
                    </div>
                    <h4 style="text-align: center;">{{ this.titles[indexs] }}分类</h4>

                    <van-row type="flex">
                        <van-col span="8" v-for="item in furniture">
                            <van-image fit="contain" :src="item.wap_banner_url" @click="fly(item)" />
                            <p style="font-size: 12px; text-align: center;">{{ item.name }}</p>
                        </van-col>
                    </van-row>
                </div>

            </van-col>
        </van-row>
        <br>
        <br>
        <br>
        <br>
    </div>
</template>

<script>
import { Categorize, Categorize_one, classify, showcase } from "@/api/category/category";
export default {
    name: 'BusinessClassify',
    data() {
        return {
            value: '',
            activeKey: '0',
            message: [],//左半部分
            furniture: [],//存放居家右半部分等数据
            a: [1005000, 1005001, 1005002, 1008000, 1010000, 1011000, 1012000, 1013001, 1019000],
            indexs: 0,

            issrc: [],//右半部分图片
            titles: []//标题
        };
    },
    mounted() {
    },

    methods: {
        async abc() {
            const { data: res } = await Categorize()
            this.message = res.categoryList
            console.log(this.message);
            this.message.forEach(item => {
                this.issrc.push(item.banner_url);
                this.titles.push(item.name)
            });
        },
        //传递给tatle所需要的渲染数据
        async bcd(id) {
            const { data: res } = await classify(id)
            localStorage.setItem('deliver', JSON.stringify(res))
        },
        async cde(id) {
            const { data: res } = await showcase(id)
            localStorage.setItem('Tetles', JSON.stringify(res))
        },

        ccc(index) {
            this.activeKey = index;
            this.indexs = index
            this.ddd(this.a[index])
        },
        async ddd(a) {
            const { data: res } = await Categorize_one(a)
            this.furniture = res.data.currentOne.subList
        },


        fly(item) {
            this.bcd(item.id)
            this.cde(item.id)
            this.$router.push({ path: '/classify/classifythen', query: { id: item.id } })
            console.log(item);
        }
    },
    created() {
        this.abc()
        this.ccc(0)

    }
};

</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

a::before {
    background-color: transparent !important;
}

.box {
    background-color: none !important;

}

.active {
    color: #cea62a;
}
</style>